<template>

    <el-container>

        <el-header>
            <el-row :gutter="20">
                <el-col :span="6"><div class="grid-content ">
                    <el-date-picker @change="dateChange"  v-model="s_date"  type="daterange" value-format="yyyy-MM-dd" align="right" unlink-panels  range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
                    </el-date-picker>
                </div></el-col>
            </el-row>

        </el-header>
        <el-container style="min-height: 300px">
            <el-main style="width: 50%">
                <div id="chart1" style="min-height: 300px"></div><!--浏览量-->
            </el-main>
            <el-main style="width: 50%">
                <div id="chart2" style="min-height: 300px"></div><!--访问量-->
            </el-main>
        </el-container>
        <el-container style="min-height: 300px">
            <el-main style="width: 50%">
                <div id="chart3" style="min-height: 300px"></div><!--结算量-->
            </el-main>
            <el-main style="width: 50%">
                <div id="chart4" style="min-height: 300px"></div><!--扣量-->
            </el-main>
        </el-container>
        <el-container style="min-height: 300px">
            <el-main style="width: 50%">
                <div id="chart5" style="min-height: 300px"></div><!--应付金额-->
            </el-main>
            <el-main style="width: 50%">
                <div id="chart6" style="min-height: 300px"></div><!--盈利-->
            </el-main>
        </el-container>

        <!--top指标-->
        <el-container style="min-height: 400px">
            <el-main style="width: 33%">
                <div id="topChart1" style="min-height: 400px"></div>
            </el-main>
            <el-main style="width: 33%">
                <div id="topChart2" style="min-height: 400px"></div>
                <!--计划结算量-->
            </el-main>
            <el-main style="width: 33%">
                <div id="topChart3" style="min-height: 400px"></div>
               <!-- 广告主结算量-->
            </el-main>

        </el-container>
    </el-container>

</template>


<script>
    export default {
        name: 'home',
        data () {
            return {
                s_date: '',
                s_planType:'0',
                views_days:[],
                views_nums:[],
                visit_days:[],
                visit_nums:[],
                js_days:[],
                js_nums:[],
                kou_days:[],
                kou_nums:[],
                pay_days:[],
                pay_nums:[],
                profit_days:[],
                profit_nums:[],
                pickerOptions2: {
                    shortcuts: [{
                        text: '近7天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);//往前推一天
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },  {
                        text: '近14天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },{
                        text: '近30天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 31);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '近半年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 181);
                            end.setTime(end.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

            }
        },
        methods:{
            dateChange:function () {
                //alert(this.s_date+'日期选择完后');
                this.getDatas();
            },
            getDatas(){
                let myChart1 = this.$echarts.init(document.getElementById('chart1'));
                let myChart2 = this.$echarts.init(document.getElementById('chart2'));
                let myChart3 = this.$echarts.init(document.getElementById('chart3'));
                let myChart4 = this.$echarts.init(document.getElementById('chart4'));
                let myChart5 = this.$echarts.init(document.getElementById('chart5'));
                let myChart6 = this.$echarts.init(document.getElementById('chart6'));

                let topChart1 = this.$echarts.init(document.getElementById('topChart1'));
                let topChart2 = this.$echarts.init(document.getElementById('topChart2'));
                let topChart3 = this.$echarts.init(document.getElementById('topChart3'));

                myChart1.showLoading({color:'#409eff'});//数据加载完之前先显示一段简单的loading动画
                myChart2.showLoading({color:'#409eff'});
                myChart3.showLoading({color:'#409eff'});
                myChart4.showLoading({color:'#409eff'});
                myChart5.showLoading({color:'#409eff'});
                myChart6.showLoading({color:'#409eff'});
                this.views_days=[];
                this.views_nums=[];
                this.visit_days=[];
                this.visit_nums=[];
                this.js_days=[];
                this.js_nums=[];
                this.kou_days=[];
                this.kou_nums=[];
                this.pay_days=[];
                this.pay_nums=[];
                this.profit_days=[];
                this.profit_nums=[];

                this.u_names=[];
                this.u_nums=[];
                this.plan_names=[];
                this.plan_nums=[];
                this.adv_names=[];
                this.adv_nums=[];

                //后台请求数据
                let params =new URLSearchParams();
                params.append("date",this.s_date);
                params.append("planType",this.s_planType);
                this.$axios.post('home/getDatas',params).then((res)=> {
                     let viewList = res.data.viewList;
                     for(let i=0;i<viewList.length;i++){
                         this.views_days.push(viewList[i].day);
                         this.views_nums.push(viewList[i].views);
                     }

                    let x_num=viewList.length;
                    let x_interval = getxInterval(x_num);

                    let visitList = res.data.visitList;
                    for(let i=0;i<visitList.length;i++){
                        this.visit_days.push(visitList[i].day);
                        this.visit_nums.push(visitList[i].uv);
                    }

                    let jsList = res.data.jsList;
                    for(let i=0;i<jsList.length;i++){
                        this.js_days.push(jsList[i].day);
                        this.js_nums.push(jsList[i].num);
                    }
                    let kouList = res.data.kouList;
                    for(let i=0;i<kouList.length;i++){
                        this.kou_days.push(kouList[i].day);
                        this.kou_nums.push(kouList[i].num);
                    }

                    let payList = res.data.payList;
                    for(let i=0;i<payList.length;i++){
                        this.pay_days.push(payList[i].day);
                        this.pay_nums.push(payList[i].num);
                    }

                    let profitList = res.data.profitList;
                    for(let i=0;i<profitList.length;i++){
                        this.profit_days.push(profitList[i].day);
                        this.profit_nums.push(profitList[i].num);
                    }

                    let uidList = res.data.uidList;
                    for(let i=uidList.length-1;i>=0;i--){
                        this.u_names.push(uidList[i].name);
                        this.u_nums.push(uidList[i].num);
                    }
                    let planList = res.data.planList;
                    for(let i=planList.length-1;i>=0;i--){
                        this.plan_names.push(planList[i].name);
                        this.plan_nums.push(planList[i].num);
                    }
                    let advList = res.data.advList;
                    for(let i=advList.length-1;i>=0;i--){
                        this.adv_names.push(advList[i].name);
                        this.adv_nums.push(advList[i].num);
                    }

                    //更新数据_浏览量
                    myChart1.setOption({
                        xAxis: {
                            data:  this.views_days,
                            axisLabel:{
                                interval:x_interval//x轴间隔数
                            },
                        },
                        series: [{
                            name: '浏览量',
                            data: this.views_nums
                        }]
                    });
                    //更新数据_访问量
                    myChart2.setOption({
                        title: {
                            text: '访问量'
                            /*subtext:'访问总数：23.12亿'*/
                        },
                        legend: {
                            data:['访问量']
                        },
                        xAxis: {
                            data:  this.visit_days,
                            axisLabel:{
                                interval:x_interval//x轴间隔数
                            },
                        },
                        series: [{
                            name: '访问量',
                            data: this.visit_nums
                        }]
                    });
                    //更新数据_结算量
                    myChart3.setOption({
                        title: {
                            text: '结算量'
                        },
                        legend: {
                            data:['结算量']
                        },
                        xAxis: {
                            data:  this.js_days,
                            axisLabel:{
                                interval:x_interval//x轴间隔数
                            },
                        },
                        series: [{
                            name: '结算量',
                            data: this.js_nums
                        }]
                    });
                    //更新数据_扣量
                    myChart4.setOption({
                        title: {
                            text: '扣量'
                        },
                        legend: {
                            data:['扣量']
                        },
                        xAxis: {
                            data:  this.kou_days,
                            axisLabel:{
                                interval:x_interval//x轴间隔数
                            },
                        },
                        series: [{
                            name: '扣量',
                            data: this.kou_nums
                        }]
                    });
                    //更新数据_应付金额
                    myChart5.setOption({
                        title: {
                            text: '应付金额'
                        },
                        legend: {
                            data:['应付金额']
                        },
                        xAxis: {
                            data:  this.pay_days,
                            axisLabel:{
                                interval:x_interval//x轴间隔数
                            },
                        },
                        series: [{
                            name: '应付金额',
                            data: this.pay_nums
                        }]
                    });
                    //更新数据_盈利
                    myChart6.setOption({
                        title: {
                            text: '盈利'
                        },
                        legend: {
                            data:['盈利']
                        },
                        xAxis: {
                            data:  this.profit_days,
                            axisLabel:{
                                interval:x_interval//x轴间隔数
                            },
                        },
                        series: [{
                            name: '盈利',
                            data: this.profit_nums
                        }]
                    });

                    topChart1.setOption({
                        title : {
                            text: '站长结算量top10',
                        },
                        yAxis : [
                            { data : this.u_names,}
                        ],
                        series : [
                            { data:this.u_nums,}
                        ]
                    });
                    topChart2.setOption({
                        title : {
                            text: '计划结算量top10',
                        },
                        yAxis : [
                            { data : this.plan_names,}
                        ],
                        series : [
                            { data:this.plan_nums,}
                        ]
                    });
                    topChart3.setOption({
                        title : {
                            text: '广告主结算量top10',
                        },
                        yAxis : [
                            { data : this.adv_names,}
                        ],
                        series : [
                            { data:this.adv_nums,}
                        ]
                    });


                    myChart1.hideLoading();    //隐藏加载动画
                    myChart2.hideLoading();
                    myChart3.hideLoading();
                    myChart4.hideLoading();
                    myChart5.hideLoading();
                    myChart6.hideLoading();

                }).catch((error)=> {
                    console.log(error);
                });
            },
        },
        mounted(){
            //初始化option
            var option = {
                title: {
                    text: '浏览量'
                    /*subtext:'浏览总数：23.12亿'*/
                },
                tooltip: { trigger: 'axis'},
                //图例名
                legend: {
                    data:['浏览量']
                    //x: 'right'
                },
                grid: {
                    left: '3%',   //图表距边框的距离
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                //工具框，可以选择
                toolbox: {
                    feature: {
                        //dataZoom:{}//区域缩放
                        //saveAsImage: {},
                        //dataView:{show: true},//数据视图
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    //坐标轴颜色
                    axisLine:{
                        lineStyle:{
                            color:'#2b2e38'
                        }
                    },
                    //x轴文字旋转
                    axisLabel:{
                        rotate:45,
                        interval:0//x轴间隔数
                    },
                },
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [ //虚线
                    {
                        name:'浏览量',
                        type:'line',
                        symbolSize:4,   //拐点圆的大小
                        color:['#20a8d8'],  //折线条的颜色
                        data:[],
                        smooth:false,   //关键点，为true是不支持虚线的，实线就用true
                        itemStyle:{
                            normal:{
                                lineStyle:{
                                    width:2,
                                    type:'solid'  //'dotted'虚线 'solid'实线
                                }
                            }
                        }
                    }]
            };

            // 浏览量
            let myChart1 = this.$echarts.init(document.getElementById('chart1'));
            myChart1.setOption(option);
            // 访问量
            let myChart2 = this.$echarts.init(document.getElementById('chart2'));
            myChart2.setOption(option);
            // 结算量
            let myChart3 = this.$echarts.init(document.getElementById('chart3'));
            myChart3.setOption(option);
            // 扣量
            let myChart4 = this.$echarts.init(document.getElementById('chart4'));
            myChart4.setOption(option);
            // 应付金额
            let myChart5 = this.$echarts.init(document.getElementById('chart5'));
            myChart5.setOption(option);
            // 盈利
            let myChart6 = this.$echarts.init(document.getElementById('chart6'));
            myChart6.setOption(option);



            //条形图
            var option2 = {
                title : {
                    text: '站长结算量top10',
                },
                tooltip : {
                    trigger: 'axis'
                },
                grid: {
                    left: '3%',   //图表距边框的距离
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'value',
                        boundaryGap : [0, 0.01],
                        axisLine: {show: false},
                        axisTick: { show: false},
                        axisLabel : {
                            formatter: function(){
                                return "";
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisLine: {show: false },
                        axisTick: {show: false},
                        /*axisLabel:{
                            rotate:30
                        },*/
                    }
                ],
                series : [
                    {
                        name:'结算量',
                        type:'bar',
                        data:[],
                        barWidth: 16,
                        color:['#20a8d8'],
                        label: {
                            normal: {
                               // show: true,//是否显示数字
                                position: 'right',
                                offset: [5, -2],
                                textStyle: {
                                    color: '#20a8d8',
                                    fontSize: 10
                                }
                            }
                        },
                    }
                ]
            };
            //站长结算top10
            let topChart1 =this.$echarts.init(document.getElementById('topChart1'));
            topChart1.setOption(option2);
            //计划结算top10
            let topChart2 =this.$echarts.init(document.getElementById('topChart2'));
            topChart2.setOption(option2);
            //广告主结算top10
            let topChart3 =this.$echarts.init(document.getElementById('topChart3'));
            topChart3.setOption(option2);


            //初始化数据
            this.getDatas();

            /*const token=this.$store.getters.token;
            this.$Notice.success({
                title: '欢迎使用数据分析平台',
                desc:  `你的账户权限是 ${token}`,
                duration: 3
            });*/

        }
    }



    function  getxInterval(x_num) {
        if(x_num < 40 && x_num >= 30){
            return 2;
        }else if(x_num <60 && x_num >= 40){
            return 3;
        }else if(x_num <80 && x_num >= 60){
            return 4;
        }else if(x_num <100 && x_num >= 80){
            return 5;
        }else if(x_num <120 && x_num >= 100){
            return 6;
        }else if(x_num <140 && x_num >= 120){
            return 7;
        }else if(x_num <160 && x_num >= 140){
            return 8;
        }else if(x_num <180 && x_num >= 160){
            return 9;
        }else if(x_num <200 && x_num >= 180){
            return 10;
        }else if(x_num <220 && x_num >= 200){
            return 11;
        }else if(x_num <240 && x_num >= 220){
            return 12;
        }else if(x_num >= 240){
            return 15;
        }else{
            return 0;
        }
    }
</script>

